<template>
    <div>
       <el-card>
          <mytitle :showLine="false">{{ $route.meta.title }}</mytitle>
          <div class="card-box">
             <el-form :model="info" :rules="rules" ref="ruleForm" label-width="120px" class="demo-ruleForm">
                <el-form-item label="姓名" prop="name" style="width: 320px;">
                   <el-input type="text"  v-model="info.name" placeholder="请输入姓名" />
                </el-form-item>
                <el-form-item label="手机号" prop="phone" style="width: 320px;">
                   <el-input type="text"  v-model="info.phone" placeholder="请输入手机号" />
                </el-form-item>
                <div></div>
                <el-form-item label="头像" style="width: 320px;">
                  <mysend :picUrl="info.headPortrait" @getUrl="getMypic" />
                </el-form-item>
                <el-form-item label="所属部门" prop="departmentId" style="width: 320px;">
                   <el-cascader v-loading="loading" v-model="valuse" @change="valusechange" :show-all-levels="false"
                       :options="options" 
                      :props="{ checkStrictly: true, value: 'id', label: 'name' }" clearable></el-cascader>
                </el-form-item>
                <div></div>
                <el-form-item label="身份证" style="width: 320px;">
                   <el-input type="text"  v-model="info.idNumber" placeholder="请输入身份证" />
                </el-form-item>
                <el-form-item label="学历" style="width: 320px;">
                   <el-select v-model="info.education" placeholder="请选择学历" >
                      <el-option v-for="item in option" :key="item" :label="item" :value="item">
                      </el-option>
                   </el-select>
                </el-form-item>
                <el-form-item label="入职时间" style="width: 320px;">
                   <el-date-picker v-model="info.entryTime" type="datetime"  value-format="yyyy-MM-dd HH:mm:ss"
                      :picker-options="pickerOptions"
                      placeholder="选择日期时间">
                   </el-date-picker>
                </el-form-item>
                <div></div>
                <el-form-item label="" prop="state" style="width: 320px;">
                   <el-checkbox v-model="info.whetherOperator" :true-label="1" :false-label="0">是否作为操作端登录账号</el-checkbox>
                </el-form-item>
                <div></div>
                <el-form-item label="旧密码" style="width: 320px;">
                   <el-input type="password"  v-model="info.password" placeholder="请输入密码" />
                </el-form-item>
                <el-form-item label="新密码" style="width: 320px;" v-if="info.password">
                   <el-input type="password"  v-model="info.newPassword" @change="surePass" placeholder="请再次输入密码"  />
                </el-form-item>
                <div></div>
                <el-form-item>
                   <el-button @click="submitForm('ruleForm')" type="success" >确定</el-button>
                   <el-button @click="$router.go(-1)" type="success"  plain>返回</el-button>
                </el-form-item>
             </el-form>
          </div>
       </el-card>
    </div>
 </template>
 <script>
 import { findUserdataByDepartmentId, findPcUserByPcUserId,addPcAccount } from '../util/api.js'
 import { validateMobile } from '../util/config'
 export default {
    data() {
       return {
          valuse: [],
          info: {
             id:"",
             name: '',
             phone: "",
             departmentId: "",
             headPortrait: "",
             password:"",
             idNumber: "",
             entryTime: "",
             education: "",
             whetherOperator: "",//是否可以作为登录账户0 1 
             newPassword:"",
             hiredate:""
          },
          option: [
             '博士后','博士', '硕士', '研究生','本科', '专科', '高中', '初中','小学'
          ],
          pickerOptions: {
               disabledDate(time) {
                  return time.getTime() < Date.now() - 8.64e7;
             }
            },
          options: [],
          loading: false,
          rules: {
             name: [
                { required: true, message: '请输入姓名', trigger: 'blur' },
             ],
             phone: [
                { required: true, message: '请输入手机号', trigger: 'blur' },
                { validator: validateMobile.bind(this), trigger: 'blur' },
             ],
             departmentId:[
                { required: true, message: '请选择部门', trigger: 'change' }
             ]
          }
       }
    },
    mounted() {
        this.findUserdata()
        this.getDetail()
    },
    methods: {
      async getDetail(){
            let res = await findPcUserByPcUserId(this.$route.query)
            if (res.code != 200) return 
            // console.log(res)
            this.info = res.data
            this.valuse=res.data.departmentId
            this.info.entryTime = res.data.hiredate
        },
       async findUserdata() {
          this.loading = true
          let res = await findUserdataByDepartmentId({ departmentId: "1223456852" })
         //  console.log(res)
          if (res.code != 200) return this.options = []
          this.options = res.data
          this.loading = false
       },
       varietyChange(val) {
          if (val) this.findUserdata()
       },
       getMypic(res) {
            if(res){
               this.info.headPortrait = res
            } 
        },
       valusechange(val) {
         //  console.log(val)
          if (val.length == 0) {
             this.info.departmentId = ""
          } else {
             this.info.departmentId = val[val.length - 1]
          }
       },
       submitForm(formName) {
          this.$refs[formName].validate(async (valid) => {
             if (valid) {
                delete  this.info.resetPassword
                let res = await addPcAccount(this.info)
               //  console.log(res)
                if(res.code == 60005) return this.$message.error(res.msg)
                if (res.code != 200) return
                this.$message.success('修改成功！')
                this.$router.go(-1)
             } else {
               //  console.log('error submit!!');
                return false;
             }
          });
       },
       surePass(val){
            if(val!=this.info.password){
                 this.$message.info('密码不一致')
                 this.info.resetPassword=""
            } 
       }
    }
 }
 </script>
 <style lang="less" scoped>
 .card-box {
    width: 100%;
    height: 100%;
 
    .avatar {
       width: 146px;
       height: 146px;
       border-radius: 5px;
    }
 
    .demo-ruleForm {
       width: 100%;
 
       .el-form-item {
          display: inline-block;
       }
    }
 }
 /deep/.is-checked .el-checkbox__inner{
    background-color: #67C23A;
    border-color: #67C23A;
 }
 /deep/.is-checked .el-checkbox__label{
    color: #6F7174;
 }
 
 </style>